<template>
  <div class="page-wrapper">
    <!-- 步骤条区域 -->
    <div class="step-container">
      <el-steps
        style="width: 100%"
        align-center
        :active="activeStep"
        finish-status="success"
        @step-click="handleStepClick"
      >
        <el-step title="申请入住" :status="getStepStatus(1)" />
        <el-step title="入住评估" :status="getStepStatus(2)" />
        <el-step title="入住审批" :status="getStepStatus(3)" />
        <el-step title="入住配置" :status="getStepStatus(4)" />
        <el-step title="签约办理" :status="getStepStatus(5)" />
      </el-steps>
    </div>

    <!-- 动态渲染子组件（【核心修改】：移除 finished-steps 的传递） -->
    <div class="content-area">
      <component 
        :is="currentComponent" 
        :step-num="activeStep"
        :elderly-id="elderlyId"
        @go-back="handleChildGoBack" 
        @submit-success="handleChildSubmitSuccess" 
       
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
// 导入子组件
import check1 from "./checkcomponents/check1.vue";
import check2 from "./checkcomponents/check2.vue";
import check3 from "./checkcomponents/check3.vue";
import check4 from "./checkcomponents/check4.vue";
import check5 from "./checkcomponents/check5.vue";
// 页面加载时，从路由参数中获取 elderlyId
const route = useRoute(); // 初始化路由实例
// 步骤状态管理
const activeStep = ref(1);
const finishedSteps = ref([]); // 这个状态我们仍保留，用于步骤条的对号显示
const router = useRouter();
const stepNo = ref('');
// 从 check1 组件获取 elderlyId
const elderlyId = ref(''); // 存储从 check1 拿到的 elderlyId
// 处理子组件的“提交成功”事件
const handleChildSubmitSuccess = (id) => {
   // 1. 如果是第一步（check1）提交，接收并存储 elderlyId
   if (activeStep.value === 1 && id) {
    elderlyId.value = id; // 将子组件返回的 elderlyId 存入父组件状态
  }
  // 我们仍然需要标记步骤为已完成，以便步骤条显示对号
  if (!finishedSteps.value.includes(activeStep.value)) {
    finishedSteps.value.push(activeStep.value);
  }
  
  if (activeStep.value < 5) {
    activeStep.value++;
  } else {
    ElMessage.success("所有步骤已完成！");
    router.push("/rutui/ruzhu/ruzhu");
  }
};
onMounted(() => {
  // 1. 接收路由参数
  const receivedElderlyId = route.query.elderlyId; // 路由中的老人ID
  const receivedStepNo = route.query.stepNo;       // 路由中的步骤号

  // 2. 赋值给页面数据：老人ID → elderlyId
  if (receivedElderlyId) {
    elderlyId.value = receivedElderlyId;
  }

   // 赋值步骤号并同步已完成步骤
   if (receivedStepNo) {
    const stepNum = Number(receivedStepNo);
    activeStep.value = stepNum;

    // 核心：将所有小于当前步骤的步骤标记为已完成（自动变色）
    finishedSteps.value = []; // 清空原有记录
    for (let i = 1; i < stepNum; i++) {
      finishedSteps.value.push(i);
    }
  }


  // 验证赋值结果（可选，用于调试）
  console.log("页面老人ID：", elderlyId.value);
  console.log("步骤条当前步骤：", activeStep.value);
});
// 父组件 <script setup> 中修改 stepComponents（可选）
const stepComponents = [
  { step: 1, component: check1, props: ['stepNum', 'elderlyId'] }, // check1 接收两个 props
  { step: 2, component: check2, props: ['stepNum', 'elderlyId'] }, // 后续组件同样接收
  { step: 3, component: check3, props: ['stepNum', 'elderlyId'] },
  { step: 4, component: check4, props: ['stepNum', 'elderlyId'] },
  { step: 5, component: check5, props: ['stepNum', 'elderlyId'] },
];

// 计算当前显示的子组件
const currentComponent = computed(() => {
  const target = stepComponents.find(item => item.step === activeStep.value);
  return target ? target.component : check1;
});

// 步骤条状态判断（这个逻辑很好，我们保留它）
const getStepStatus = (step) => {
  if (finishedSteps.value.includes(step)) return "success";
  if (step === activeStep.value) return "process";
  return "wait";
};

// 【核心】处理子组件的“返回”事件
const handleChildGoBack = () => {
  // 点击返回按钮，直接跳转到指定的列表页面
  // router.push("/togetherwork/togetherwork1/myapply");
  router.back(); 
};


// 步骤条点击切换（建议保留）
const handleStepClick = (step) => {
  const clickedStep = step.index + 1;
  if (clickedStep <= activeStep.value) {
    activeStep.value = clickedStep;
  }
};

</script>

<style scoped>
/* 样式不变 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}
.step-container {
  margin-bottom: 24px;
}
.content-area {
  flex: 1;
  min-height: 300px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px;
  background: #fff;
}
</style>